JavaScript থেকে WebAssembly মডিউল লোড করা

JavaScript থেকে WebAssembly মডিউল লোড করা

WebAssembly (WASM) কোডটি JavaScript থেকে লোড করা এবং এক্সিকিউট করা একটি সাধারণ প্রক্রিয়া, যা ব্রাউজারে JavaScript এবং WebAssembly একে অপরের সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে। WebAssembly মডিউল লোড করার জন্য JavaScript এ WebAssembly.instantiate() বা WebAssembly.instantiateStreaming() API ব্যবহার করা হয়।

এখানে আমরা বিস্তারিতভাবে দেখব কিভাবে JavaScript থেকে WebAssembly মডিউল লোড করা যায়।

1. WebAssembly মডিউল লোড করার প্রক্রিয়া

1.1 WebAssembly.instantiate()

WebAssembly.instantiate() ব্যবহার করে WebAssembly মডিউল লোড এবং এক্সিকিউট করা হয়। এই পদ্ধতিটি প্রথমে WebAssembly ফাইল (যেমন .wasm) একটি ArrayBuffer হিসেবে লোড করে, তারপর সেটি WebAssembly.Module এ রূপান্তর করে, এবং তারপর তা এক্সপোর্ট করা হয়।

// WebAssembly মডিউল লোড করার উদাহরণ
fetch('your_module.wasm')  // WebAssembly ফাইল লোড করা
    .then(response => response.arrayBuffer())  // ফাইলটিকে ArrayBuffer তে রূপান্তর করা
    .then(bytes => WebAssembly.instantiate(bytes))  // WebAssembly মডিউল ইনস্ট্যানশিয়েট করা
    .then(wasmModule => {
        console.log(wasmModule);  // WebAssembly মডিউলটি কনসোলে দেখানো হবে
        // মডিউল থেকে এক্সপোর্ট করা ফাংশনগুলি ব্যবহার করা
        const add = wasmModule.instance.exports.add;  // WebAssembly থেকে এক্সপোর্ট করা ফাংশন
        console.log(add(10, 20));  // WebAssembly ফাংশন কল
    })
    .catch(console.error);  // ত্রুটি হলে কনসোলে দেখানো হবে

ব্যাখ্যা:

• fetch(): প্রথমে fetch() API দিয়ে your_module.wasm ফাইলটি লোড করা হয়।
• response.arrayBuffer(): লোড করা ফাইলটি ArrayBuffer তে রূপান্তর করা হয়, যা WebAssembly মডিউল লোড করতে সক্ষম।
• WebAssembly.instantiate(): এরপর WebAssembly.instantiate() ফাংশন দিয়ে এই ArrayBuffer থেকে WebAssembly মডিউল তৈরি করা হয়।
• wasmModule.instance.exports: এক্সপোর্ট করা ফাংশন বা ডেটা অ্যাক্সেস করার জন্য exports ব্যবহার করা হয়।

1.2 WebAssembly.instantiateStreaming()

WebAssembly.instantiateStreaming() ফাংশনটি WebAssembly মডিউলটি লোড করার জন্য একটি অপটিমাইজড পদ্ধতি, যেখানে ফাইলটি ডাউনলোড করার সাথে সাথে তা ইনস্ট্যানশিয়েট (instantiate) করা হয়। এটি দ্রুত এবং কার্যকরী কারণ এটি WebAssembly ফাইলটি ডাউনলোড করার সাথে সাথে ইন্সট্যানশিয়েশন প্রক্রিয়া শুরু করে।

// WebAssembly.instantiateStreaming() ব্যবহার করার উদাহরণ
WebAssembly.instantiateStreaming(fetch('your_module.wasm'))
    .then(wasmModule => {
        console.log(wasmModule);  // WebAssembly মডিউলটি কনসোলে দেখানো হবে
        const multiply = wasmModule.instance.exports.multiply;  // WebAssembly থেকে এক্সপোর্ট করা ফাংশন
        console.log(multiply(5, 4));  // WebAssembly ফাংশন কল
    })
    .catch(console.error);  // ত্রুটি হলে কনসোলে দেখানো হবে

ব্যাখ্যা:

• WebAssembly.instantiateStreaming(): এটি ফাইল ডাউনলোড করার সাথে সাথে ইনস্ট্যানশিয়েট করে এবং এটি সাধারণত fetch() API ব্যবহার করে WebAssembly ফাইল লোড করে।
• এই পদ্ধতিটি response.arrayBuffer() এর চেয়ে দ্রুত, কারণ এটি ডাউনলোড এবং ইন্সট্যানশিয়েশন একসাথে করে।

2. WebAssembly মডিউল থেকে ফাংশন এক্সপোর্ট এবং কল করা

WebAssembly মডিউল এক্সপোর্ট করা ফাংশন JavaScript এ কল করা যেতে পারে। মডিউল থেকে ফাংশন এক্সপোর্ট করার জন্য, আপনাকে WebAssembly কোডে সেই ফাংশনগুলো ডিফাইন করতে হবে এবং তারপর JavaScript এ সেগুলো কল করতে হবে।

2.1 WebAssembly কোড (C)

ধরা যাক, আপনার WebAssembly মডিউলে একটি add ফাংশন রয়েছে, যা দুটি সংখ্যার যোগফল প্রদান করবে:

// WebAssembly C কোড
#include <stdio.h>

int add(int a, int b) {
    return a + b;
}

এই C কোডটিকে Emscripten ব্যবহার করে .wasm ফাইল তৈরি করতে হবে:

emcc your_file.c -o your_module.wasm

2.2 JavaScript কোড দিয়ে ফাংশন কল

JavaScript কোডে WebAssembly মডিউলটি লোড করার পর, আপনি এক্সপোর্ট করা ফাংশন কল করতে পারবেন:

fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(wasmModule => {
        // add() ফাংশন কল করা
        const addFromWasm = wasmModule.instance.exports.add;
        console.log(addFromWasm(5, 10));  // WebAssembly থেকে ফাংশন কল এবং আউটপুট দেখানো
    })
    .catch(console.error);

এখানে, addFromWasm(5, 10) ফাংশনটি WebAssembly মডিউল থেকে এক্সপোর্ট করা add ফাংশনকে কল করছে।

3. WebAssembly ফাংশন Import করা JavaScript থেকে

আপনি JavaScript কোডের ফাংশনও WebAssembly মডিউলে import করতে পারেন। এজন্য আপনাকে WebAssembly.instantiate() বা WebAssembly.instantiateStreaming() ফাংশনের দ্বিতীয় আর্গুমেন্টে imports প্রদান করতে হবে।

3.1 JavaScript থেকে WebAssembly মডিউলে ফাংশন Import করা

// JavaScript ফাংশন
function multiply(a, b) {
    return a * b;
}

fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes, {
        env: {
            multiply: multiply // JavaScript ফাংশন WebAssembly এ ইম্পোর্ট করা
        }
    }))
    .then(wasmModule => {
        const result = wasmModule.instance.exports.multiply(5, 10);
        console.log(result);  // WebAssembly ফাংশন কল
    })
    .catch(console.error);

এখানে, multiply ফাংশনটি JavaScript থেকে WebAssembly মডিউলে ইম্পোর্ট করা হয়েছে এবং তারপর WebAssembly মডিউল থেকে multiply ফাংশন কল করা হয়েছে।

সারসংক্ষেপ

• WebAssembly.instantiate(): এটি একটি WebAssembly মডিউল লোড এবং ইনস্ট্যানশিয়েট করতে ব্যবহৃত হয়। এটি মডিউলকে একটি ArrayBuffer থেকে তৈরি করে এবং এক্সপোর্ট করা ফাংশনগুলি ব্যবহার করার সুযোগ দেয়।
• WebAssembly.instantiateStreaming(): এটি দ্রুত এবং কার্যকরী উপায়ে WebAssembly মডিউল লোড এবং ইনস্ট্যানশিয়েট করে, কারণ এটি ডাউনলোড এবং ইনস্ট্যানশিয়েশন একসাথে করে।
• WebAssembly থেকে JavaScript ফাংশন এক্সপোর্ট এবং JavaScript থেকে WebAssembly ফাংশন ইম্পোর্ট করার মাধ্যমে JavaScript এবং WebAssembly একে অপরের সাথে ইন্টারঅ্যাক্ট করতে সক্ষম হয়।